<template>
  <div class="CommodityManagement">
    <div class="form-seach">
      <el-form :model="form" label-width="90px" label-position="left">
        <el-form-item label="商品名称:">
          <el-input
            v-model="form.commodityName"
            class="cus-input"
            placeholder="请输入商品名"
          />
        </el-form-item>
        <el-form-item label="商品分类:">
          <el-select v-model="form.commodityType" @change="getCommodityTypeListByid">
            <el-option
              v-for="(item,index) in commodityTypeList"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
          <el-select v-model="form.commodityTypeChild">
            <el-option
              v-for="(item,index) in commodityTypeChildList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="商品状态:">-->
        <!--          <el-select v-model="form.commodityState" clearable @change="changeTab">-->
        <!--            <el-option label="全部状态" value="" />-->
        <!--            <el-option label="销售中" value="1" />-->
        <!--            <el-option label="未销售" value="0" />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="商品类型:" prop="goodsType" class="form-item">
          <el-select v-model="form.goodsType" clearable filterable placeholder="请选择商品类型" class="cus-input">
            <el-option value="lease" label="租赁" />
            <el-option value="sale" label="售卖" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchList">筛选</el-button>
          <el-button @click="resetFormData">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="ele-content">
      <div class="ele-to-sl">
        <div>
          <el-radio-group v-model="form.commodityState" @change="tabClick">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="1">销售中</el-radio-button>
            <el-radio-button label="0">未销售</el-radio-button>
          </el-radio-group>
        </div>
        <div>
          <el-button type="primary" @click="addCommodity">新增商品</el-button>
        </div>
      </div>
    </div>

    <div class="ele-table">
      <el-table
        ref="elTable"
        v-loading="listLoading"
        :data="list"
        :fit="true"
        element-loading-text="正在查询中。。。"
        border
        max-height="600"
        @selection-change="selectChange"
      >
        <el-table-column type="selection" fixed="left" />
        <el-table-column
          label="商品编号"
          prop="goodsId"
          align="center"
          width="130"
          :resizable="false"
          fixed="left"
        />
        <el-table-column label="商品主图" align="center" :resizable="false" width="80">
          <template slot-scope="scope">
            <TableColumnGoodsImage :src="scope.row.goodsImg" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center" :resizable="false" min-width="160" prop="goodsName" :show-overflow-tooltip="true" />
        <el-table-column
          label="商品类型"
          prop="type"
          align="center"
          width="90"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 'lease'" type="success" size="small">租赁</el-tag>
            <el-tag v-else-if="scope.row.type == 'sale'" type="primary" size="small">售卖</el-tag>
            <el-tag v-else type="info" size="small">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="商品状态"
          align="center"
          width="90"
          :resizable="false"
          prop="state"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state == 1" type="success" size="small">销售中</el-tag>
            <el-tag v-else-if="scope.row.state == 0" type="info" size="small">未销售</el-tag>
            <el-tag v-else type="info" size="small">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="云库存"
          align="center"
          width="90"
          :resizable="false"
          prop="cloudNum"
        />
        <el-table-column
          label="访问量"
          prop="numberCount"
          align="center"
          min-width="140"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>访问人数：{{ scope.row.visitPeopleNum }}</span><br>
            <span>访问次数：{{ scope.row.visitCountNum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          header-align="center"
          align="left"
          width="255"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>
              <el-button
                type="text"
                @click="copyCommodity(scope.row)"
              >复制商品</el-button>&nbsp;
            </span>
            <span>
              <el-button
                type="text"
                @click="getLinkShopById(scope.row)"
              >关联门店管理</el-button>
                  &nbsp;
            </span>
            <span v-if="scope.row.state ===0 ">
              <el-button
                type="text"
                @click="operation(scope.row)"
              >编辑 </el-button>&nbsp;
            </span>
            <span v-if="scope.row.state ===1 ">
              <el-button
                type="text"
                @click="lowCommodity(scope.row)"
              >下架</el-button>
            </span>
            <span v-if="scope.row.state ===0 ">
              <el-button
                type="text"
                @click="delCommodity(scope.row)"
              >删除</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <div>
        <div style="display: inline-flex;">
          <el-button plain size="small" @click="allSelection">全选</el-button>
          <el-button v-if="form.commodityState==='0'" plain size="small" @click="selectUpCommodity">上架</el-button>
          <el-button v-if="form.commodityState==='1'" plain size="small" @click="selectLowCommodity">下架</el-button>
          <el-button v-if="form.commodityState==='0'" plain size="small" @click="delSelectCommodity">删除</el-button>
        </div>
      </div>
      <pagination v-show="total>0" :total="total" :page.sync="formData.page" :limit.sync="formData.limit" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination'
import { changeState, commodityList, deleteCommodity, getCommodityCategoryList } from '@/api/commodity'
import TableColumnGoodsImage from '../../components/TableColumnGoodsImage/index'

/** 商品管理 */
export default {
  name: 'CommodityManagement',
  components: { TableColumnGoodsImage, Pagination },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      activeTabs: 'allCommodity',
      form: {
        commodityName: '',
        commodityType: '',
        commodityTypeChild: '',
        commodityState: '',
        goodsType: ''
      },
      formData: {
        commodityName: '',
        commdityType: '',
        commditySubType: '',
        commdityState: '',
        goodsType: '',
        page: 1,
        limit: 10
      },
      // table
      list: [],
      selectList: [],
      commodityTypeList: [],
      commodityTypeChildList: [],
      listLoading: true,
      total: 0,
      limit: 10,
      page: 1
    }
  },
  computed: {
    /* 请求头部信息*/
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.getCommodityTypeList()
    this.getList()
  },
  methods: {
    /** 添加商品 */
    addCommodity() {
      this.$router.push({ name: 'AddGoods' })
    },

    getList() {
      this.listLoading = true
      const data = this.formData
      commodityList(data).then(response => {
        this.list = response.data.data.list
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    changeTab(val) {
      this.formData.commdityState = val
      this.getList()
    },

    /** 关联门店*/
    getLinkShopById(row) {
      this.$router.push({ name: 'Relation', query: { p: this.$ed(row) }})
    },
    /** 编辑 */
    operation(row) {
      this.$router.push({ name: 'EditGoods', query: { p: this.$ed({
        edit: true,
        goodsId: row.goodsId
      }) }})
    },
    /** 复制商品*/
    copyCommodity(row) {
      this.$router.push({ name: 'CopyGoods', query: { p: this.$ed({
        copy: true,
        goodsId: row.goodsId
      }) }})
    },
    /** 上架*/
    upCommodity(row) {
      const data = {
        idList: row.goodsId,
        commodityState: 1
      }
      this.$confirm('是否上架商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        changeState(data).then(response => {
          this.$notify.success({
            title: '成功',
            message: '上架成功'
          })
          this.getList()
        }).catch(response => {
          this.$notify.error({
            title: '异常',
            message: '上架异常'
          })
          this.getList()
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消上架'
        })
      })
    },
    /** 下架*/
    lowCommodity(row) {
      const data = {
        idList: row.goodsId,
        commodityState: 0
      }
      this.$confirm('是否下架商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        changeState(data).then(response => {
          this.$notify.success({
            title: '成功',
            message: '下架成功'
          })
          this.getList()
        }).catch(response => {
          this.$notify.error({
            title: '异常',
            message: '下架异常'
          })
          this.getList()
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消下架'
        })
      })
    },
    /** 删除*/
    delCommodity(row) {
      this.$confirm('是否删除商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCommodity({ idList: row.goodsId }).then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.getList()
        }).catch(response => {
          this.$notify.error({
            title: '异常',
            message: '删除异常'
          })
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /** tabs选项卡 */
    tabClick(e) {
      this.formData.commdityState = e
      this.getList()
    },
    /** 重置*/
    resetFormData() {
      this.formData.commodityName = ''
      this.formData.commdityState = ''
      this.formData.commdityType = ''
      this.formData.commditySubType = ''
      this.formData.goodsType = ''
      this.form.commodityName = ''
      this.form.commodityState = ''
      this.form.commodityType = ''
      this.form.commodityTypeChild = ''
      this.form.goodsType = ''
      this.getList()
    },
    searchList() {
      this.formData.commdityType = this.form.commodityType
      this.formData.commditySubType = this.form.commodityTypeChild
      console.log(this.form.commodityTypeChild)
      this.formData.commdityState = this.form.commodityState
      this.formData.commodityName = this.form.commodityName
      this.formData.goodsType = this.form.goodsType
      console.log(this.formData)
      this.getList()
    },
    getCommodityTypeList() {
      getCommodityCategoryList().then(response => {
        this.commodityTypeList = response.data.data
      })
    },
    getCommodityTypeListByid(data) {
      this.form.commodityTypeChild = ''
      if (this.form.commodityType !== '') {
        console.log(this.commodityTypeList, data)
        this.commodityTypeList.forEach(item => {
          if (item.value === data) {
            this.commodityTypeChildList = item.children
          }
        })
      }
    },

    /** 全选*/
    allSelection() {
      this.$refs.elTable.toggleAllSelection()
    },

    /** 批量上架*/
    selectUpCommodity() {
      let idString = ''
      if (!this.selectList || this.selectList.length <= 0) {
        return this.$notify.error({
          title: '错误',
          message: '未选择商品'
        })
      } else {
        this.selectList.forEach(item => {
          if (idString) {
            idString = idString + ',' + item
          } else {
            idString = item
          }
        })
        const data = {
          idList: idString,
          commodityState: 1
        }
        this.$confirm('是否上架商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          changeState(data).then(response => {
            this.$notify.success({
              title: '成功',
              message: '上架成功'
            })
            this.getList()
          }).catch(response => {
            this.$notify.error({
              title: '异常',
              message: '上架异常'
            })
            this.getList()
          })
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消上架'
          })
        })
      }
    },
    /** 批量下架*/
    selectLowCommodity() {
      let idString = ''
      if (!this.selectList || this.selectList.length <= 0) {
        return this.$notify.error({
          title: '错误',
          message: '未选择商品'
        })
      } else {
        this.selectList.forEach(item => {
          if (idString) {
            idString = idString + ',' + item
          } else {
            idString = item
          }
        })
        const data = {
          idList: idString,
          commodityState: 0
        }
        this.$confirm('是否下架商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          changeState(data).then(response => {
            this.$notify.success({
              title: '成功',
              message: '下架成功'
            })
            this.getList()
          }).catch(response => {
            this.$notify.error({
              title: '异常',
              message: '下架异常'
            })
            this.getList()
          })
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消下架'
          })
        })
      }
    },

    /** 批量删除*/
    delSelectCommodity() {
      let idString = ''
      if (!this.selectList || this.selectList.length <= 0) {
        return this.$notify.error({
          title: '错误',
          message: '未选择商品'
        })
      } else {
        this.selectList.forEach(item => {
          if (idString) {
            idString = idString + ',' + item
          } else {
            idString = item
          }
        })
        /* const  idList= this.selectList*/
        this.$confirm('是否删除已选择商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCommodity({ idList: idString }).then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            this.getList()
          }).catch(response => {
            this.$notify.error({
              title: '异常',
              message: '删除异常'
            })
          })
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },

    /** 表格单选触发*/
    selectChange(e) {
      this.selectList = []
      e.forEach(element => {
        this.selectList.push(element.goodsId)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.CommodityManagement {
  padding: 30px;
  .form-seach {
    padding: 20px 30px;
    padding-bottom: 0px;
    margin-bottom: 30px;
    border: 1px solid #eeeeee;
    .cus-input {
      max-width: 400px;
    }
  }
  .ele-content {
    width: 100%;
    .ele-to-sl {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }
  }
  .ele-table,
  .pagination {
    margin-bottom: 30px;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
